<template>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <header class="navbar">
      <div class="navbar-left">
        <div class="logo">
          <i class="el-icon-box" style="font-size: 24px; color: #1890ff;"></i>
          <span class="logo-text">npm Explore</span>
        </div>
        
        <!-- 导航菜单 - 大屏幕 -->
        <nav class="nav-menu" v-if="!isMobile">
          <router-link 
            :to="'/'" 
            class="nav-item"
            :class="{ active: $route.path === '/' }"
          >
            <i class="el-icon-s-home"></i>
            <span>仪表盘</span>
          </router-link>
          <router-link 
            :to="'/packages'" 
            class="nav-item"
            :class="{ active: $route.path.includes('/packages') }"
          >
            <i class="el-icon-collection-tag"></i>
            <span>包管理</span>
          </router-link>
          <router-link 
            :to="'/tags'" 
            class="nav-item"
            :class="{ active: $route.path === '/tags' }"
          >
            <i class="el-icon-price-tag"></i>
            <span>标签管理</span>
          </router-link>
          <router-link 
            :to="'/discussions'" 
            class="nav-item"
            :class="{ active: $route.path.includes('/discussions') }"
          >
            <i class="el-icon-chat-dot-round"></i>
            <span>讨论区</span>
          </router-link>
          <router-link 
            :to="'/stats'" 
            class="nav-item"
            :class="{ active: $route.path === '/stats' }"
          >
            <i class="el-icon-data-analysis"></i>
            <span>统计信息</span>
          </router-link>
          <router-link 
            :to="'/sync'" 
            class="nav-item"
            :class="{ active: $route.path === '/sync' }"
          >
            <i class="el-icon-refresh"></i>
            <span>数据同步</span>
          </router-link>
        </nav>
        
        <!-- 移动端菜单按钮 -->
        <div class="mobile-menu-btn" v-else @click="toggleMobileMenu">
          <i class="el-icon-menu"></i>
        </div>
      </div>
      
      <div class="navbar-right">
        <!-- 搜索框 -->
        <div class="search-box" v-if="!isMobile">
          <el-input 
            v-model="globalSearchQuery"
            placeholder="搜索包、标签或讨论..."
            prefix-icon="el-icon-search"
            size="small"
            @keyup.enter.native="globalSearch"
            style="width: 200px;"
          />
        </div>
        
        <!-- 用户信息 -->
        <div class="user-info">
          <el-dropdown>
            <span class="el-dropdown-link">
              <el-avatar shape="circle" icon="el-icon-user" />
              <span class="user-name" v-if="!isMobile">管理员</span>
              <i class="el-icon-arrow-down el-icon--right" v-if="!isMobile"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <i class="el-icon-setting"></i>
                <span>设置</span>
              </el-dropdown-item>
              <el-dropdown-item divided>
                <i class="el-icon-switch-button"></i>
                <span>退出登录</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </header>
    
    <!-- 移动端侧边菜单 -->
    <div class="mobile-menu-overlay" v-if="showMobileMenu" @click="toggleMobileMenu"></div>
    <aside class="mobile-menu" :class="{ open: showMobileMenu }">
      <div class="mobile-menu-header">
        <div class="logo">
          <i class="el-icon-box" style="font-size: 24px; color: #1890ff;"></i>
          <span class="logo-text">npm Explore</span>
        </div>
        <button class="close-btn" @click="toggleMobileMenu">
          <i class="el-icon-close"></i>
        </button>
      </div>
      
      <nav class="mobile-nav-menu">
        <router-link 
          :to="'/'" 
          class="nav-item"
          :class="{ active: $route.path === '/' }"
          @click="toggleMobileMenu"
        >
          <i class="el-icon-s-home"></i>
          <span>仪表盘</span>
        </router-link>
        <router-link 
          :to="'/packages'" 
          class="nav-item"
          :class="{ active: $route.path.includes('/packages') }"
          @click="toggleMobileMenu"
        >
          <i class="el-icon-collection-tag"></i>
          <span>包管理</span>
        </router-link>
        <router-link 
          :to="'/tags'" 
          class="nav-item"
          :class="{ active: $route.path === '/tags' }"
          @click="toggleMobileMenu"
        >
          <i class="el-icon-price-tag"></i>
          <span>标签管理</span>
        </router-link>
        <router-link 
          :to="'/discussions'" 
          class="nav-item"
          :class="{ active: $route.path.includes('/discussions') }"
          @click="toggleMobileMenu"
        >
          <i class="el-icon-chat-dot-round"></i>
          <span>讨论区</span>
        </router-link>
        <router-link 
          :to="'/stats'" 
          class="nav-item"
          :class="{ active: $route.path === '/stats' }"
          @click="toggleMobileMenu"
        >
          <i class="el-icon-data-analysis"></i>
          <span>统计信息</span>
        </router-link>
        <router-link 
          :to="'/sync'" 
          class="nav-item"
          :class="{ active: $route.path === '/sync' }"
          @click="toggleMobileMenu"
        >
          <i class="el-icon-refresh"></i>
          <span>数据同步</span>
        </router-link>
      </nav>
      
      <!-- 移动端搜索框 -->
      <div class="mobile-search-box">
        <el-input 
          v-model="globalSearchQuery"
          placeholder="搜索包、标签或讨论..."
          prefix-icon="el-icon-search"
          @keyup.enter.native="globalSearch"
        />
      </div>
    </aside>
    
    <!-- 主内容区域 -->
    <main class="main-content" :class="{ 'mobile-menu-active': showMobileMenu }">
      <Nuxt />
    </main>
    
    <!-- 全局加载遮罩 -->
    <div class="global-loading" v-if="isGlobalLoading">
      <el-loading-spinner />
    </div>
  </div>
</template>

<script>
export default {
  name: 'DefaultLayout',
  data() {
    return {
      showMobileMenu: false,
      isGlobalLoading: false,
      globalSearchQuery: '',
      isMobile: false
    }
  },
  mounted() {
    // 初始化响应式布局
    this.checkScreenSize()
    window.addEventListener('resize', this.checkScreenSize)
    
    // 监听路由变化，关闭移动端菜单
    this.$router.afterEach(() => {
      this.showMobileMenu = false
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.checkScreenSize)
  },
  methods: {
    toggleMobileMenu() {
      this.showMobileMenu = !this.showMobileMenu
    },
    
    checkScreenSize() {
      this.isMobile = window.innerWidth < 768
    },
    
    globalSearch() {
      if (!this.globalSearchQuery.trim()) {
        this.$message.warning('请输入搜索内容')
        return
      }
      
      // 简单的全局搜索逻辑，可以根据实际需求扩展
      // 这里默认搜索包，因为包是最核心的资源
      this.$router.push({
        path: '/packages',
        query: { search: this.globalSearchQuery }
      })
    },
    
    // 提供给子组件调用的全局加载方法
    showGlobalLoading() {
      this.isGlobalLoading = true
    },
    
    hideGlobalLoading() {
      this.isGlobalLoading = false
    }
  },
  provide() {
    // 向子组件提供全局加载方法
    return {
      showGlobalLoading: this.showGlobalLoading,
      hideGlobalLoading: this.hideGlobalLoading
    }
  }
}
</script>

<style scoped>
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f7fa;
}

/* 顶部导航栏样式 */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 64px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.navbar-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: #262626;
}

.logo-text {
  margin-left: 4px;
}

.nav-menu {
  display: flex;
  gap: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  height: 64px;
  color: #666;
  text-decoration: none;
  transition: all 0.3s ease;
  border-bottom: 2px solid transparent;
}

.nav-item:hover {
  color: #1890ff;
  background-color: #f0f9ff;
}

.nav-item.active {
  color: #1890ff;
  background-color: #f0f9ff;
  border-bottom-color: #1890ff;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-box {
  position: relative;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-name {
  margin-right: 4px;
}

.mobile-menu-btn {
  display: none;
  font-size: 20px;
  cursor: pointer;
}

/* 移动端侧边菜单样式 */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1001;
  transition: opacity 0.3s ease;
}

.mobile-menu {
  position: fixed;
  top: 0;
  left: -300px;
  width: 300px;
  height: 100%;
  background-color: #fff;
  z-index: 1002;
  transition: left 0.3s ease;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
  overflow-y: auto;
}

.mobile-menu.open {
  left: 0;
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.close-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #666;
}

.mobile-nav-menu {
  padding: 16px 0;
}

.mobile-nav-menu .nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  height: auto;
  color: #666;
  text-decoration: none;
  transition: all 0.3s ease;
  border-bottom: none;
}

.mobile-nav-menu .nav-item:hover {
  background-color: #f0f9ff;
}

.mobile-nav-menu .nav-item.active {
  background-color: #e6f7ff;
  color: #1890ff;
  border-left: 3px solid #1890ff;
}

.mobile-search-box {
  padding: 16px;
  border-top: 1px solid #f0f0f0;
}

/* 主内容区域样式 */
.main-content {
  flex: 1;
  padding: 0;
  overflow-y: auto;
  transition: margin-left 0.3s ease;
}

.main-content.mobile-menu-active {
  margin-left: 0;
}

/* 全局加载样式 */
.global-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 2000;
}

/* 响应式样式 */
@media (max-width: 768px) {
  .navbar {
    padding: 0 16px;
  }
  
  .navbar-left {
    gap: 16px;
  }
  
  .nav-menu {
    display: none;
  }
  
  .search-box {
    display: none;
  }
  
  .mobile-menu-btn {
    display: block;
  }
  
  .main-content {
    padding: 0;
  }
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}
</style>